<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="./index.css">
	
	
</head>
<body>
<!--  导航   -->
 <div class="bu">
 	
 </div>
 <div class="container">
 	 <nav class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand" href="#">Themes</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
    </div>
  </div>
  <a class="nav-item nav-link" href="#">Themes</a>
      <a class="nav-item nav-link" href="#">About</a>
      <a class="nav-item nav-link" href="#">FAQ</a>
</nav>
 </div>

<!--	-->
<div class="dou">
		<div class="container">
		<div class="hui">
		<button type="button" class="btn btn-outline-primary ya">B</button>
	</div>
</div>
    <div class="container">
     <div class="aiy">
     <div class="row">
     <div class="col-md-12 one">
     	<a class="nav-item nav-link youzi" href="#">Themes</a>
     </div>
     </div>
       <div class="col-md-12 two">
     	<a class="nav-item nav-link youzi" href="#">Customize and extend</a>
     </div>
          <div class="col-md-12 terny">
     	 <input class="btn btn-primary zxc" type="button" value="Explore">
     </div>   
		 </div>
	</div>
</div>
<div class="ao">
	<div class="container">
<div class="row">
	<div class="col-md-4">
			<div class="card">
  <img src="./img/QQ%E6%88%AA%E5%9B%BE20190405152125.png"  alt="...">
  <div class="card-body">
    <h5 class="card-title">Components and examples</h5>
    <p class="card-text">Each teme features new components</p>
  </div>
</div>
</div>
<div class="col-md-4">
			<div class="card">
  <img src="./img/QQ%E6%88%AA%E5%9B%BE20190405152159.png"  alt="...">
  <div class="card-body">
    <h5 class="card-title">Tons of variables</h5>
    <p class="card-text">Theme components inherit much</p>
  </div>
</div>
</div>
<div class="col-md-4">
			<div class="card">
  <img src="./img/QQ%E6%88%AA%E5%9B%BE20190405152214.png" alt="...">
  <div class="card-body">
    <h5 class="card-title">Source files and tools</h5>
    <p class="card-text">Each theme includes components</p>
  </div>
</div>
</div>
	</div>
</div>

</div>

<!--  仨人         -->
     <div class="kuaa">
     	<div class="container">
      <h3>Tema</h3>
      	<div class="row zzz">
      	      		<div class="col-md-4">
      			<div class="card">
			  <img src="./img/insta-2.jpg" class="gan" alt="...">
			  <img class="gaf" src="./img/avatar-fat.jpg" alt="">
			  <div class="card-body">
				<h5 class="card-title">Jacob Thornton</h5>
				<p class="card-text">Greator of Bootstrap,engineer at Twitter &  Medium. Founder of Bumpers.</p>
				<a href="#" class="btn btn-primary ai">View GitlHub</a>
			  </div>
			</div>
      		</div>
      		<div class="col-md-4">
      			<div class="card">
			  <img src="./img/insta-1.jpg" class="gan" alt="...">
			  <img class="gaf" src="./img/avatar-mdo.jpg" alt="">
			  <div class="card-body">
				<h5 class="card-title">Mark Otto</h5>
				<p class="card-text">Design atGithub. Creator of Bootstrap. Prevously at Twitter. Huge nerd.</p>
				<a href="#" class="btn btn-primary ai">View GitlHub</a>
			  </div>
			</div>
      		</div>
      		<div class="col-md-4">
      			<div class="card" >
			  <img src="./img/insta-3.jpg" class="gan" alt="...">
			  <img class="gaf" src="./img/avatar-dhg.png" alt="">
			  <div class="card-body">
				<h5 class="card-title">Dave Gamache</h5>
				<p class="card-text">Design atTwitter & Medium. Starting something new soon;)</p>
				<a href="#" class="btn btn-primary ai">View GitlHub</a>
			  </div>
			</div>
      		</div>
      	</div>
      </div>
      
     </div>
      
      

<!--   小横杠     -->
<div class="for">
	<div class="container">
	<button type="button" class="btn btn-outline-primary nonn">Explone</button>
	<div class="row">
		<nav class="navbar navbar-light bg-light desd1">
  <span class="navbar-text no1">
    C'mon,check out the themes!
  </span>
	</div>
	  <nav class="navbar navbar-light bg-light desd">
  <span class="navbar-text no2">
    Now you know what we're about, so peep the goods!
  </span>
</nav>
</div>
</div>



<!--   脚底板子-->

<div class="footer">
	<div class="container">
		<div class="row">
			<ul>
				<li><a href="">About</a></li>
				<li><a href="">Terms</a></li>
				<li><a href="">Privacy</a></li>
				<li><a href="">Licenses</a></li>
				<li><a href="">FAQ</a></li>
				<li><a href="">Bootstrap</a></li>
			</ul>
		</div>
	</div>
</div>



	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
	
	
</body>
</html>